<template>
<div class="feature-engineer">
    <title-bar title="图形化展示"></title-bar>
    <template v-if="res.list.length">
        <div class="chart-top-box">
            <el-select filterable v-model="fields" multiple :multiple-limit="2" placeholder="请选择字段">
                <el-option v-for="(item, i) in res.list" :key="i" :label="item.name" :value="i"></el-option>
            </el-select>
            <span class="sample-num">总样本数：{{res.sampleNum}}</span>
        </div>
        <template v-if="fields.length">
            <div class="chart-box" :class="{'chart-table-box': res.label}" v-for="item in fields" :key="item">
                <bar-chart v-if="res.label" :id="`chart${item}`" :data="res.list[item].barchart"></bar-chart>
                <table-chart :width="res.label ? '68%' : '100%'" :label="res.label" :data="res.list[item].tabledata"></table-chart>
            </div>
        </template>
        <nodata-box v-else :border="true"></nodata-box>
    </template>
</div>
</template>

<script>
import TitleBar from '@/components/TitleBar'
import NodataBox from '@/components/NodataBox'
import BarChart from './BarChart'
import TableChart from './TableChart'
import { mapGetters } from 'vuex'
export default {
    name: 'FeatureEngineer',
    computed: {
        ...mapGetters({
            analysisReportData: 'common/getAnalysisReportData'
        })
    },
    components: {
        NodataBox,
        TitleBar,
        BarChart,
        TableChart
    },
    data () {
        return {
            res: {
                label: false,
                list: [],
                sampleNum: null
            },
            fields: []
        }
    },
    created () {
        this.init()
    },
    methods: {
        init () {
            this.res = this.analysisReportData.summary
            if (this.res.list.length > 1) {
                this.fields = [0, 1]
            }
        }
    }
}
</script>

<style lang="less">
.feature-engineer {
    .chart-top-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .el-select {
            width: 500px;
        }
    }

    .sample-num {
        color: #333;
        font-size: 16px;
    }

    .chart-box {
        padding-top: 10px;
    }

    .chart-table-box {
        display: flex;
        justify-content: space-between;
    }
}
</style>
